<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>备件管理系统 - 库存调整</title>
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
  <script src="https://unpkg.com/vue@3.2.36/dist/vue.global.prod.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://unpkg.com/element-plus"></script>
  <script src="https://unpkg.com/@element-plus/icons-vue/dist/index.iife.min.js"></script>
  <style>
    .el-table__header th {
      background-color: #e1dddd !important; /* 表头底色改为灰色 */
    }
  </style>
</head>
<body>
<div id="app">
  <!-- 页面标题插槽 -->
  <h2 style="display: none;"><slot name="pageTitle">库存调整</slot></h2>

  <!-- 页面头部插槽 -->
  <header class="header">
    <h2 style="margin: 0;">库存调整</h2>

  </header>

  <!-- 主体内容插槽 -->
  <main>
    <!-- 新增搜索框和新增按钮 -->
    <div style="margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;">
      <el-button type="primary" size="medium" @click="showAddDialog = true">新增记录</el-button>
      <div style="display: flex; gap: 10px;">
        <el-input v-model="searchQuery" placeholder="请输入备件ID或差异量" style="width: 200px;"></el-input>
        <el-button type="info" size="medium" @click="logout">退出</el-button>
      </div>
    </div>

    <el-table :data="paginatedInventoryAdjustmentsList" border style="width: 100%">
      <el-table-column prop="adjustmentid" label="ID"></el-table-column>
      <el-table-column prop="sparepartid" label="备件ID"></el-table-column>
      <el-table-column prop="difference" label="差异量"></el-table-column>
      <el-table-column prop="adjustmentDate" label="调整日期"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="mini" icon="EditPen" @click="editInventoryAdjustments(scope.row)" type="primary">编辑</el-button>
          <el-button size="mini" icon="Delete" type="danger" @click="deleteInventoryAdjustments(scope.row.adjustmentid)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加分页组件 -->
    <el-pagination
            layout="prev, pager, next"
            :total="filteredInventoryAdjustmentsList.length"
            v-model:current-page="currentPage"
            :page-size="pageSize"
            style="margin-top: 20px; justify-content: center;">
    </el-pagination>

    <!-- 新增记录弹窗 -->
    <el-dialog v-model="showAddDialog" title="新增库存调整记录" width="30%">
      <el-form :model="newInventoryAdjustments" label-position="left" label-width="100px">
        <el-form-item label="备件ID">
          <el-input v-model="newInventoryAdjustments.sparepartid"></el-input>
        </el-form-item>
        <el-form-item label="差异量">
          <el-input v-model="newInventoryAdjustments.difference"></el-input>
        </el-form-item>
        <el-form-item label="调整日期">
          <el-date-picker v-model="newInventoryAdjustments.adjustmentDate" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <div style="text-align: right;">
          <el-button @click="cancelAdd">取消</el-button>
          <el-button type="primary" @click="addInventoryAdjustments">添加</el-button>
        </div>
      </el-form>
    </el-dialog>

    <!-- 编辑记录弹窗 -->
    <el-dialog v-model="showEditDialog" title="编辑库存调整记录" width="30%">
      <el-form :model="currentEditInventoryAdjustments" label-position="left" label-width="100px">
        <el-form-item label="备件ID">
          <el-input v-model="currentEditInventoryAdjustments.sparepartid"></el-input>
        </el-form-item>
        <el-form-item label="差异量">
          <el-input v-model="currentEditInventoryAdjustments.difference"></el-input>
        </el-form-item>
        <el-form-item label="调整日期">
          <el-date-picker v-model="currentEditInventoryAdjustments.adjustmentDate" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <div style="text-align: right;">
          <el-button @click="cancelEdit">取消</el-button>
          <el-button type="primary" @click="saveEditInventoryAdjustments">保存</el-button>
        </div>
      </el-form>
    </el-dialog>
  </main>

  <!-- 底部固定 -->
  <footer class="footer">
    &copy; 2025 备件管理系统 - 版权所有
  </footer>
</div>

<script>
  const { createApp } = Vue;
  const apiClient = axios.create({
    //本机地址
    //baseURL: 'http://localhost:8086',
    //服务器 地址
    baseURL: 'http://8.137.85.243:8086',
    timeout: 5000
  });

  const app = createApp({
    data() {
      return {
        inventoryAdjustmentsList: [],
        newInventoryAdjustments: { sparepartid: null, difference: null, adjustmentDate: null },
        currentEditInventoryAdjustments: { adjustmentid: null, sparepartid: null, difference: null, adjustmentDate: null },
        searchQuery: '',
        showAddDialog: false,
        showEditDialog: false,
        currentPage: 1, // 当前页码
        pageSize: 10 // 每页显示条数
      };
    },
    computed: {
      filteredInventoryAdjustmentsList() {
        return this.inventoryAdjustmentsList.filter(item => {
          return String(item.sparepartid).includes(this.searchQuery) || String(item.difference).includes(this.searchQuery);
        });
      },
      paginatedInventoryAdjustmentsList() {
        // 实现分页逻辑
        const start = (this.currentPage - 1) * this.pageSize;
        const end = start + this.pageSize;
        return this.filteredInventoryAdjustmentsList.slice(start, end);
      }
    },
    mounted() {
      this.loadInventoryAdjustments();
    },
    methods: {
      async loadInventoryAdjustments() {
        const res = await apiClient.get('/api/inventoryadjustments/listall');
        this.inventoryAdjustmentsList = res.data;
      },
      async addInventoryAdjustments() {
        if (!this.newInventoryAdjustments.sparepartid || !this.newInventoryAdjustments.difference) {
          alert('请填写完整信息');
          return;
        }
        await apiClient.post('/api/inventoryadjustments/insert', this.newInventoryAdjustments);
        this.newInventoryAdjustments = { sparepartid: null, difference: null, adjustmentDate: null };
        this.loadInventoryAdjustments();
      },
      async deleteInventoryAdjustments(id) {
        if (!confirm('确定删除？')) return;
        await apiClient.delete(`/api/inventoryadjustments/delete/${id}`);
        this.loadInventoryAdjustments();
      },
      editInventoryAdjustments(item) {
        this.currentEditInventoryAdjustments = { ...item };
        this.showEditDialog = true;
      },
      async saveEditInventoryAdjustments() {
        if (!this.currentEditInventoryAdjustments.sparepartid || !this.currentEditInventoryAdjustments.difference) {
          alert('请填写完整信息');
          return;
        }
        await apiClient.put(`/api/inventoryadjustments/update/${this.currentEditInventoryAdjustments.adjustmentid}`, this.currentEditInventoryAdjustments);
        this.showEditDialog = false;
        this.loadInventoryAdjustments();
      },
      cancelEdit() {
        this.showEditDialog = false;
      },
      logout() {
        window.location.href = '/dashboard.html';
      },
      cancelAdd() {
        this.showAddDialog = false;
      }
    }
  });

  app.use(ElementPlus);
  const { EditPen, Delete } = ElementPlusIconsVue;
  app.component('EditPen', EditPen);
  app.component('Delete', Delete);
  app.mount('#app');
</script>
</body>
</html>
